<template>
<view>
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">零钱转赠</block>
	</cu-custom>		
	<form @submit="toMoney">
		<view class="info">
			<view><view>用户ID</view><input type="text" v-model="to_user_id" name="to_user_id" @blur="getInfo" placeholder="请输入转赠用户ID" /></view>
			<view><view>昵称</view><view>{{ toUser.weixin_name }}</view></view>
			<view><view>真实姓名</view><view>{{ toUser.name }}</view></view>
		</view>
		<view class="give">
			<view>
				<view>转赠金额</view>
				<input type="text" v-model.number="send_currency" name="send_currency" placeholder="请输入转赠的零钱"/>
			</view>
			<view>
				<view>总余额</view>
				<view>{{ m.balance }}</view>
			</view>
			<view>
				<view>可转赠余额</view>
				<view>{{ m.can_donate }}</view>
			</view>
			<view>
				<view>留言</view>
				<input type="text" placeholder="恭喜发财,大吉大利" v-model="describe" />
			</view>
		</view>
		<view class="btn">
			<button type="warn" formType="submit">转赠</button>
		</view>
		<uni-fab
		:pattern="pattern"
		:content="content"
		:horizontal="horizontal"
		:vertical="vertical"
		:direction="direction"
		@trigger="trigger"
		></uni-fab>
	</form>
	<key-pass v-model="keyShow" :pass="cash" :vcode="vcode" @on-clear="toClear" @submit="toCashSMS" @key="optKey" @del="optDel" :verify="verify"></key-pass>
</view>
</template>

<script>
	import UniFab from '@/components/uni-fab'
	import { GiveMoneyId, SaveMoney } from '@/common/api/users'
	import { sendPhoneMsg } from '@/common/api'
	import graceChecker from '@/common/utils/graceChecker'
	import  { mapGetters } from 'vuex'
	import KeyPass from '@/components/keypass'
	export default {
		name: 'give',
		data () {
			return {
				keyShow: false,
				m: {
					balance: 0,
					can_donate: 0
				},
				cash: {
					pw: ''
				},
				vcode: '',
				verify: '',
				to_user_id: '',
				send_currency: '',
				toUser: {},
				describe: '',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#e4393c'
				},
				content: [
					{
						iconPath: '/static/urecord.png',
						selectedIconPath: '/static/urecord.png',
						text: '记录',
						active: false
					}					
				]				
			}
		},
		onShow () {
			if (!this.userInfo.pay_pwd) {
				uni.showModal({
					content: '您还没有设置支付密码',
					confirmText: '去设置',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({ url: '/assets/setpwd' })
						} else {
							uni.navigateBack()
						}
					}
				})
			}			
		},		
		watch: {
			send_currency: function (val, oldval) {
				if (val > this.m.usable) this.send_currency = ''
			},
			vcode (val, oldval) {
				if (val.length === 6) {
					if (val === this.verify) {
						this.SendToMoney()
					} else {
						uni.showModal({
							content: '验证码错误',
							showCancel: false
						})
						this.vcode = ''
					}					
				}
			}			
		},			
		components: { UniFab, KeyPass },
		created() {
			this.getData()
		},
		computed: {
			...mapGetters([
				'userInfo',
				'shop'
			])
		},
		methods: {
			optKey (e) {
				this.verify ? this.vcode += e : this.cash.pw += e
			},
			optDel () {
				this.verify ? this.vcode = this.vcode.substr(0, this.vcode.length - 1) : this.cash.pw = this.cash.pw.substr(0, this.cash.pw.length - 1) 
			},
			toClear () {
				this.cash.pw = ''
				this.vcode = ''
				this.verify = ''
			},
			async toCashSMS () {
				uni.showLoading()
				this.shop.donate_money_sms ? await this.sendSMS() : await this.SendToMoney()
				uni.hideLoading()
			},			
			sendSMS () {
				return new Promise(resolve => {
					sendPhoneMsg({ phone: this.userInfo.phone, action: 1 }).then(res => {
						uni.hideLoading()
						if (!res.code) {
							uni.showToast({
								title: '验证码发送成功',
								duration: 3000,
								success: () => {
									this.verify = res.mcode
								}
							})							
						} else {
							uni.showModal({
								showCancel: false,
								content: res.msg
							})
						}
						resolve()
					})
				})
			},
			toMoney (e) {
				const rule = [
					{name:"to_user_id", checkType : "notnull", errorMsg:"请输入转增用户ID"},
					{name:"send_currency", checkType : "between", checkRule: `1, ${this.m.can_donate}`, errorMsg:"请输入正确的金额"}
				]
				const result = graceChecker.check(e.detail.value, rule)
				if (result) {
					this.keyShow = true
					this.$bus.emit('on-keyboard', 0)
				} else {
					uni.showToast({
						icon: 'none',
						title: graceChecker.error
					})
				}
			},
			trigger (e) {
				switch(e.index) {
					case 0:
					uni.navigateTo({ url: '/assets/record' })
					break;
				}
			},
			getInfo () {
				if (this.to_user_id) {
					uni.showLoading({ mask: true })
					GiveMoneyId({ to_user_id: this.to_user_id  }).then(res => {
						uni.hideLoading()
						if (res.code === 1) {
							this.toUser = res.data
						} else {
							uni.showToast({ icon: 'none', title: res.msg })
							this.to_user_id = ''
						}
					})
				}				
			},
			SendToMoney () {
				return new Promise(resolve => {
					let msg = !this.describe ? '恭喜发财，大吉大利' : this.describe
					SaveMoney({ password: this.userInfo.pay_pwd, type: 'send_money', send_money: this.send_currency, describe: msg, to_user_id: this.to_user_id  }).then(res => {
						this.send_currency = this.to_user_id = ''
						this.toUser.name = this.toUser.weixin_name = ''
						this.verify = this.code = this.cash.pw = ''
						if (res.code === 401) {
							uni.showModal({
								content: '转赠成功',
								showCancel: false,
							})
						} else {
							uni.showModal({
								content: res.remark,
								showCancel: false,
							})						
						}
						this.keyShow = false
						resolve()
					})					
				})
			},
			getData () {
				SaveMoney({ type: 'Check_money' }).then(res => {
					if (!res.code) {
						this.m = res.data
					}
				})
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';
.info { margin: 0 0 20upx; }
.info, .give {
	background-color:white;
	& > view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80upx;
		padding: 0 15upx;
		position: relative;
		& > input {
			flex: 1;
			margin-left: 15upx;
			text-align: right;
			font-size: 26upx
		}		
		&:not(:last-of-type) {
			.border-bottom;
		}
		& > view {
			font-size: 24upx;
		}
	}
}
.btn {
	margin: 40upx 15upx;
}
.id {
	padding: 10upx 15upx;
}
</style>
